<template>
  <div>
    <el-row style="margin-bottom: 15px">
      <el-button type="primary" plain @click="stateClick('0')">待跟进</el-button>
      <el-button type="primary" plain @click="stateClick('2')">已跟进/在考虑</el-button>
      <el-button type="primary" plain @click="stateClick('3')">已邀约/待上门</el-button>
      <el-button type="primary" plain @click="stateClick('4')">已沟通/不需要</el-button>
      <el-button type="primary" plain @click="stateClick('5')">已上门/待签约</el-button>
      <el-button type="primary" plain @click="stateClick('6')">已上门/资质不符</el-button>
      <el-button type="primary" plain @click="stateClick('7')">已签约</el-button>
      <el-button type="primary" plain @click="stateClick('8')">已进件</el-button>
      <el-button type="primary" plain @click="stateClick('1')">已完成</el-button>
      <el-button type="primary" style="float:right;" icon="el-icon-date" @click="pastTimesGetData">过往数据查询</el-button>
    </el-row>
    <div class="handle-box">
      <el-button v-if="threeLevelsbool.fen" type="primary" @click="handleEdit">分配</el-button>
      <el-button v-if="threeLevelsbool.fen" class="mr10" type="primary" @click="recoveryClick" :loading="piNumsLoad">批量回收</el-button>
      <el-date-picker class="mr10" v-model="startTime_endTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                      value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-select v-model="query.fromType" placeholder="选择数据来源" class="mr10" :style="{width:'150px'}">
        <el-option label="全部来源" value="">
        </el-option>
        <el-option v-for="item in optionVal" :key="item.dfFromName" :label="item.dfFromName" :value="item.dfType">
        </el-option>
      </el-select>
      <el-select v-model="query.fromSeasId" placeholder="选择所属公海" class="mr10">
        <el-option label="全部公海" value="">
        </el-option>
        <el-option v-for="item in haiOptionVal" :key="item.hsName" :label="item.hsName" :value="item.hsId">
        </el-option>
      </el-select>
      <el-select v-model="query.orderByType" placeholder="" class="mr10">
        <el-option label="跟进时间默认排序" value="0"></el-option>
        <el-option label="跟进时间倒序排序" value="1"></el-option>
        <el-option label="跟进时间正序排序" value="2"></el-option>
      </el-select>
    </div>
    <div class="handle-box">
      <el-col :span="12" class="mr10">
        <el-input v-model="query.kw" placeholder="请输入用户名/电话查询" class="handle-input" style="width:100%;"></el-input>
      </el-col>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <div class="container" style="margin-bottom:15px;padding:15px;">
      <el-row style="text-align:center;font-size:16px;">
        <el-col :span="12">
          今日新增
          <span style="color:#409EFF;font-weight:bold;">{{addNum.dayNum}} 条</span>
        </el-col>
        <el-col :span="12">
          本月新增
          <span style="color:#409EFF;font-weight:bold;">{{addNum.monthNum}} 条</span>
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="loading" :data="tableData" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header"
              @selection-change="handleSelectionChange" @filter-change="levelChange" @sort-change="sortChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
      <el-table-column prop="cName" label="客户名称" width="100">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="drawerStateClick(scope.row.cId,scope.row.cIsFlag)">{{ scope.row.cName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cPhone" label="电话" width="150"></el-table-column>
      <el-table-column label="客户级别" width="150" column-key="jibie"
                       :filters="[{text:'A(重要客户)',value:'A'},{text:'B(优质客户)',value:'B'},{text:'C(普通客户)',value:'C'}]" filter-placement="bottom-end"
                       :filter-method="filterTag">
        <template slot-scope="scope">{{ scope.row.cLevel==='A'?'A(重要客户)':scope.row.cLevel==='B'?'B(优质客户)':'C(普通客户)' }}</template>
      </el-table-column>
      <el-table-column prop="newFollowUpRecord" label="最新跟进记录" width="200"></el-table-column>
      <el-table-column prop="newFollowUpTime" label="最新跟进时间" width="200" sortable="custom"></el-table-column>
      <el-table-column prop="cNextTime" label="下次联系时间" width="200"></el-table-column>
      <el-table-column prop="fromName" label="客户来源" width="150"></el-table-column>
      <el-table-column label="成交状态" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cStatus === '0'" type="primary">待跟进</el-tag>
          <el-tag v-if="scope.row.cStatus === '1'" type="success">已完成</el-tag>
          <el-tag v-if="scope.row.cStatus === '2'" type="primary">已跟进/在考虑</el-tag>
          <el-tag v-if="scope.row.cStatus === '3'" type="primary">已邀约/待上门</el-tag>
          <el-tag v-if="scope.row.cStatus === '4'" type="primary">已沟通/不需要</el-tag>
          <el-tag v-if="scope.row.cStatus === '5'" type="primary">已上门/待签约</el-tag>
          <el-tag v-if="scope.row.cStatus === '6'" type="primary">已上门/资质不符</el-tag>
          <el-tag v-if="scope.row.cStatus === '7'" type="warning">已签约</el-tag>
          <el-tag v-if="scope.row.cStatus === '8'" type="warning">已进件</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="text" v-if="threeLevelsbool.hui" :loading="scope.row.recoveryFlg" @click="recoveryClick(scope.row)">回收客户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                     :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
      </el-pagination>
    </div>

    <!-- 分配数据弹出框 -->
    <el-dialog title="分配数据" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-row v-loading="loadingfenFormLoad">
        <el-input v-model="keyWordVal" placeholder="请输入姓名查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getRenPar">搜索</el-button>
        <el-row style="margin-top:20px;">
          <el-radio-group v-model="fenFormType" style="width:100%;">
            <el-col :span="6" v-for="(item,i) in fenFormDataArr" :key="item.id" style="margin-bottom:20px;">
              <el-radio :label="item.id">{{item.name}}</el-radio>
            </el-col>
          </el-radio-group>
        </el-row>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit" :loading="loadingfenFormLoad">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 过往数据查询 -->
    <el-dialog title="过往数据查询" :visible.sync="pastTimesFlg" width="60%">
      <div class="handle-box">
        <el-date-picker class="mr10" v-model="pastTimes.time" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-select v-model="query.type" placeholder="选择查询类别" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="新数据" value="1"></el-option>
          <el-option label="公海数据" value="0"></el-option>
        </el-select>
        <el-input v-model="pastTimes.souVal" placeholder="请输入用户名/电话查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="pastTimesGetPageSou">搜索</el-button>
      </div>
      <el-table :data="pastTimesData" v-loading="pastTimesload">
        <el-table-column property="ddrCusName" label="客户名称"></el-table-column>
        <el-table-column property="ddrCusPhone" label="电话"></el-table-column>
        <el-table-column property="ddrTime" label="分配时间"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="pastTimes.page" :page-size="pastTimes.limit"
                       :total="pastTimes.totalCount" :pager-count="5" @current-change="pastTimesGetPage" @prev-click="pastTimesGetPage"
                       @next-click="pastTimesGetPage">
        </el-pagination>
      </div>
    </el-dialog>

    <!-- 查看客户信息窗口 -->
    <customer-model ref="drawerState" @fathergetData="getData"></customer-model>
  </div>
</template>

<script>
import { DealListsAjax, customerSetPublicAjax, InternationalWatersDistributionAjaxSub, DealListsGetPastTimes } from '../../../../api/index';
import customermodel from '../../../common/customermodel';

export default {
  data() {
    return {
      loading: true,
      startTime_endTime: [],

      pastTimesData: [],
      pastTimesFlg: false,
      pastTimesload: false,
      pastTimes: {
        souVal: '',
        time: [],
        page: 1,
        limit: 10,
        totalCount: 0,
      },

      query: {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        kw: '',
        status: "",
        userId: "",
        fromType: '',
        fromSeasId: '',
        type: '',
        orderByType: '0',
        //筛选
        leavels: [],
        orderbyfollowup: 0,
        orderbycreate: 0,
        orderdo: '',
      },
      totalCount: 0,
      totalPage: 0,

      tableData: [],

      editVisible: false,
      fenFormType: "",

      multipleSelection: [],

      activeNamePrev: "",

      recoveryFlg: false,

      piNumsLoad: false,

    };
  },
  props: ['activeName', 'threeLevelsbool', 'addNum', 'fenFormDataArr', 'loadingfenFormLoad', 'keyWord', 'optionVal', 'haiOptionVal'],
  components: {
    'customer-model': customermodel
  },
  computed: {
    keyWordVal: {
      get() {
        return this.keyWord
      },
      set(val) {
        this.$emit('update:keyWord', val)
      }
    }
  },
  created() {
    this.getData();
  },
  watch: {
    activeName: function(n, m) {
      this.getData();
    }
  },
  methods: {
    //获取过往数据
    pastTimesGetData() {
      this.pastTimesFlg = true;
      this.pastTimesload = true;
      let query = {
        userId: this.activeName,
        startTime: this.pastTimes.time ? this.pastTimes.time[0] : '',
        endTime: this.pastTimes.time ? this.pastTimes.time[1] : '',
        kw: this.pastTimes.souVal,
        page: this.pastTimes.page,
        limit: this.pastTimes.limit,
        isNew: this.query.type,
      };
      DealListsGetPastTimes(query).then((res) => {
        this.pastTimesload = false;
        if (res.code == 0) {
          this.pastTimesData = res.recordList;
          this.pastTimes.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //搜索
    pastTimesGetPageSou() {
      this.pastTimes.page = 1;
      this.pastTimesGetData();
    },
    //过往数据翻页点击
    pastTimesGetPage(num) {
      this.pastTimes.page = num;
      this.pastTimesGetData();
    },

    // 初始化
    getData() {
      this.loading = true;
      if (this.activeName) {
        this.query.userId = this.activeName;
        if (typeof (this.query.leavels) == 'object') {
          this.query.leavels = this.query.leavels.length > 0 ? this.query.leavels.join(',') : '';
        }
        DealListsAjax(this.query).then((res) => {
          this.loading = false;
          if (res.code === 0) {
            res.recordList.forEach((item, i) => {
              item.recoveryFlg = false;
            })
            this.tableData = res.recordList;
            this.totalCount = res.totalCount;
            this.totalPage = res.totalPage;
          } else {
            this.$message(res.msg);
          }
        });
      }
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    //列表客户等级筛选
    filterTag(value, row, column) {
      return true;
    },
    //筛选时间监听
    levelChange(filters) {
      console.log(filters);
      this.query.leavels = filters.jibie ? filters.jibie : [];
      this.getData();
    },
    //列表时间日期排序
    sortChange(item) {
      console.log(item);
      if (item.prop == 'newFollowUpTime') {
        this.query.orderdo = 2;
        this.query.orderbyfollowup = item.order == 'ascending' ? 1 : item.order == 'descending' ? 2 : 0;
      }
      if (item.prop == 'cCreateTime') {
        this.query.orderdo = 1;
        this.query.orderbycreate = item.order == 'ascending' ? 1 : item.order == 'descending' ? 2 : 0;
      }
      this.getData();
    },
    //搜索
    handleSearch() {
      this.query.page = 1;
      if (this.startTime_endTime) {
        this.query.startTime = this.startTime_endTime[0];
        this.query.endTime = this.startTime_endTime[1];
      } else {
        this.query.startTime = "";
        this.query.endTime = "";
      }
      this.getData();
    },
    // 多选操作
    handleSelectionChange(val) {
      let arr = [];
      val.forEach((item, i) => {
        arr.push(item.cId);
      })
      this.multipleSelection = arr;
    },
    // 分配数据
    handleEdit() {
      if (this.multipleSelection.length > 0) {
        this.editVisible = true;
      } else {
        this.$message("请选择需要分配的信息");
      }
    },
    // 确认分配的人
    saveEdit() {
      this.loadingfenFormLoad = true;
      InternationalWatersDistributionAjaxSub({ cusIds: this.multipleSelection, userId: this.fenFormType }).then((res) => {
        this.editVisible = false;
        this.loadingfenFormLoad = false;
        if (res.code === 0) {
          this.$message.success("分配成功");
          this.multipleSelection = [];
          this.getData();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //获取人员配置
    getRenPar() {
      this.$emit('getRen');
    },
    //点击状态查看
    stateClick(str) {
      this.query.status = str;
      this.loading = true;
      this.getData();
    },
    //点击查看客户信息
    drawerStateClick(id, flag) {
      this.$refs.drawerState.drawerStateClick(id, flag);
      this.$refs.drawerState.disabledForm();
    },
    //回收客户
    recoveryClick(item) {
      let id;
      if (item.cId) {
        id = [item.cId];
        item.recoveryFlg = true;
      } else {
        if (this.multipleSelection.length > 0) {
          id = this.multipleSelection;
          this.piNumsLoad = true;
        } else {
          this.$message('请选择回收的线索');
          return false;
        }
      }
      customerSetPublicAjax({ cIds: id }).then((res) => {
        if (item.cId) {
          item.recoveryFlg = false;
        } else {
          this.piNumsLoad = false;
        }
        if (res.code === 0) {
          this.$message.success("回收成功");
          this.getData();
        } else {
          this.$message(res.msg);
        }
      });
    },
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.el-icon-star-on {
    font-size: 20px;
}
.IconColor {
    color: #e6a23c;
}
</style>